import React from 'react'
import './avatars.scss'
import { useSelector } from 'react-redux'

function Avatars({username,coupon,balance,level,icon}) {
    const languages = useSelector((state)=>state.publicReducer.language)

    return (
            <div className="user">
                <i>{icon}</i>
                <span>
                    <p>{username}</p>
                    <figure>{coupon}</figure>
                    <figcaption>{balance}
                    {balance.split(".").length<2&&<span>{languages === "Korean" ? "원" : (languages === "Chinese" ? "韩元" : "won")}</span>}</figcaption>
                </span>
                <hgroup>{level}</hgroup>
            </div>
    )
}

export default Avatars